<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">	    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
	
	<title>Bootstrap, from Twitter</title>

	<script src="js/jquery-1.9.1.js"></script>
		
    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">    
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
  </head>

  <body>

    
    
    <!-- seccion de navegacion -->
    
    
    
    <div class="navbar navbar-inverse">
<div style="float:left"><img src="img/logo.png" style="height:50px"></div>
<div style="float:left"><h4 style="color:#FFFFFF">pXtreme</h4></div>


	<div class="navbar-inner">
		<div class="container-fluid">
        
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"><h3 style="color:#FFFFFF">pXtreme</h3></span>
			</a>
            
			<div class="nav-collapse collapse">
				<ul class="nav">
                <li class="divider-vertical"></li>
					<li><a href="#"><i class="icon-home icon-white"></i> Inicio</a></li>
										<li class="divider-vertical"></li>
                                  
					<ul class="nav">
					    <li class="dropdown">
						    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
						    <i class="icon-chevron-right icon-white"></i> Ideas						    <b class="caret"></b>						    </a>
						    <ul class="dropdown-menu">
                                            <li><a href="#"><i class="icon-minus"></i> Registrar </a></li>
                                            <li class="divider"></li>
                                            <li><a href="#"><i class="icon-minus"></i> Listado Propio</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#"><i class="icon-minus"></i> Listado Invitado</a></li>
					      </ul>
					    </li>
    				 </ul>
    				
                    
                    <li class="divider-vertical"></li>
					
 					</ul>
                                    
                                    
		  <div class="btn-group pull-right">
					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
						<i class="icon-user"></i> Estudiante	<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						 
						<li><a href="#"><i class="icon-share"></i> Salir</a></li>
					</ul>
				</div>
			</div>
			<!--/.nav-collapse -->
		</div>
		<!--/.container-fluid -->
	</div>
	<!--/.navbar-inner -->
</div>


    
    <!-- fin de navegacion -->

<div style="background:#ececec;margin:0px; padding:20px;margin-bottom:15px">
	<span style="color:#000000; font-size:24px">Listado de Usuarios</span>
</div>



<div id="container" class="container">
		<div id="content">
						
			



<div class="pubusuarios index">


    <p>
    <button class="btn btn-mini btn-primary btn-success" type="button">Nuevo usuario</button>
    <button class="btn btn-mini btn-primary btn-warning" type="button">Opcion </button>
    </p>

	<table cellpadding="0" cellspacing="0" class="table table-hover table-bordered"  >
	<tbody><tr>
			<th><a href="#">#</a></th>
			<th><a href="#">Nombre </a></th>
			<th><a href="#">Apellido</a></th>
			<th><a href="#">Materno</a></th>
			<th><a href="#">Correo</a></th>
			<th><a href="/onagi/pubusuarios/index/sort:created/direction:asc">Accion</a></th>
		 
		 
	</tr>
	
	<%@page import="java.util.*,gestion.negocio.GestionUsuario, gestion.modelo.*" %>
	<%

int i = 1;
	
GestionUsuario usuario = new GestionUsuario(); 
Collection<Usuario> listado = usuario.listar();
System.out.println(listado.size());

for (Usuario usuario_row : listado) {
	%>  
			 
			    
			    
			  
	<tr>
		<td><%=i++ %></td>
		<td><% out.print(usuario_row.getNombres()); %></td>
		<td><% out.print(usuario_row.getPaterno()); %></td>
		<td><% out.print(usuario_row.getMaterno()); %></td>
		<td><% out.print(usuario_row.getCorreo()); %></td>
	 
		 
		<td class="actions">
            <a role="button" class="btn" data-toggle="modal"  class="btn btn-mini"
				href="TestServlet?opcion=1&id=<% out.print(usuario_row.getIdpersona()); %>"><i class="icon-pencil"></i> Editar</a>
            </td>
			
	</tr>
			  
			  
			  
			  
<% } %>
 
	
	</tbody></table>
	
    <div class="pagination pagination-centered"><p>
        Mostrando registros del 1, hasta el 20 de 30	</p>

        <ul>
            <li></li>
            <li><span class="prev"><i class="icon-backward"></i> Anterior</span></li>
            <li><span class="current">1</span> <span><a href="/onagi/pubusuarios/index/page:2">2</a></span> </li>
            <li><span class="next"><a href="/onagi/pubusuarios/index/page:2" rel="next">Siguiente <i class="icon-forward"></i></a></span></li>
            <li><span class="disabled"><a href="/onagi/pubusuarios/index/page:2" rel="last">Ãltimo <i class="icon-fast-forward"></i></a></span></li>
        </ul>
    </div>
</div>
		</div>
	</div>
    
					    
					 <!--  modal -->
									 <script type="text/javascript">
									 
									 $(document).ready(function() {
										
									// Support for AJAX loaded modal window.
									// Focuses on first input textbox after it loads the window.
									$('[data-toggle="modal"]').click(function(e) {
										e.preventDefault();
										var url = $(this).attr('href');
										if (url.indexOf('#') == 0) {
											$(url).modal('open');
										} else {
											$.get(url, function(data) {
												$('<div class="modal hide fade">' + data + '</div>').modal();
											}).success(function() { $('input:text:visible:first').focus(); });
										}
									});
										
									});
									
									 </script>
					
					 <!--  fin nmoda -->
					    
					    
					    <!-- Button to trigger modal -->
					
					 
					<!-- Modal -->
					<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					  <div class="modal-header">
					    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					    <h3 id="myModalLabel">Modal header</h3>
					  </div>
					  
					  <div class="modal-body">
					    <p>One fine body…</p>
					  </div>
					  <div class="modal-footer">
					    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
					    <button class="btn btn-primary">Save changes</button>
					  </div>
					</div>

 
    
    <!-- /container -->
    
    
    
    <footer class="container">
		<div class="row">
			<div class="span6">
				<p>ONAGI - Sistemas y Telecomunicaciones - 2013 Â©</p>
			</div>
		</div>
	</footer>
    
    
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap-affix.js"></script>
    <script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>	
    <script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>	
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>	    
	<script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

	
  </body>
</html>
